<template>
  <a-config-provider :theme="theme">
    <div class="app">
      <!-- 粒子背景 -->
      <div id="particles-js"></div>

      <!-- 登录页面独立渲染 -->
      <div v-if="$route.meta.hideLayout">
        <router-view />
      </div>

      <!-- 主应用布局 -->
      <div v-else class="container">
        <!-- 导航栏 -->
        <NavBar />

        <!-- 页面内容 -->
        <router-view />

        <!-- 页脚 -->
        <Footer />
      </div>
    </div>
  </a-config-provider>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { theme } from 'ant-design-vue'
import NavBar from './components/NavBar.vue'
import Footer from './components/Footer.vue'
import 'particles.js'

const { darkAlgorithm } = theme

export default defineComponent({
  name: 'App',
  components: {
    NavBar,
    Footer
  },
  setup() {
    const themeConfig = ref({
      algorithm: darkAlgorithm,
      token: {
        colorPrimary: '#d4af37',
        colorBgBase: '#0a192f',
        colorTextBase: '#f0f4f8'
      }
    })

    return {
      theme: themeConfig
    }
  },
  mounted() {
    // 初始化粒子背景
    particlesJS("particles-js", {
      particles: {
        number: { value: 80, density: { enable: true, value_area: 800 } },
        color: { value: "#d4af37" },
        shape: { type: "circle" },
        opacity: { value: 0.3, random: true },
        size: { value: 3, random: true },
        line_linked: {
          enable: true,
          distance: 150,
          color: "#2c3e66",
          opacity: 0.2,
          width: 1
        },
        move: {
          enable: true,
          speed: 1,
          direction: "none",
          random: true,
          straight: false,
          out_mode: "out",
          bounce: false
        }
      },
      interactivity: {
        detect_on: "canvas",
        events: {
          onhover: { enable: true, mode: "grab" },
          onclick: { enable: true, mode: "push" },
          resize: true
        }
      },
      retina_detect: true
    })
  }
})
</script>

<style scoped>
.app {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a192f 0%, #172a45 100%);
  position: relative;
}

.app::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%, rgba(42, 82, 152, 0.1) 0%, transparent 60%),
  radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.1) 0%, transparent 60%);
  z-index: -1;
}

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
</style>